<template>
  <div>
    <el-header class="header">
      <div class="header-left">
        <span
          :class="this.isCollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold'"
          class="icont icont-left"
          @click="showCollapse"
        ></span>
        <breadcrumb></breadcrumb>
      </div>
      <div class="header-right">
        <el-avatar
          class="header-right-avatar"
          :src="this.user.file"
        ></el-avatar>
        <el-dropdown
          class="logout-box"
          size="small"
          trigger="click"
          @command="handleCommand"
        >
          <span class="el-dropdown-link">
            {{ this.user.account
            }}<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="a">个人中心</el-dropdown-item>
            <el-dropdown-item command="a">去博客页面</el-dropdown-item>
            <el-dropdown-item command="logout">退出</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </el-header>
  </div>
</template>

<script>
import { mapMutations } from "vuex";
import breadcrumb from "../breadcrumb/index.vue";
export default {
  data() {
    return {
      user: {},
      isCollapse: false,
    };
  },
  components: {
    breadcrumb,
  },
  created() {
    console.log(this.$route, "this.$route");
    this.user = JSON.parse(localStorage.getItem("user"));
  },
  methods: {
    ...mapMutations(["setCollapse"]),
    handleCommand(val) {
      if (val == "logout") {
        localStorage.clear();
        this.$router.push("/");
        const h = this.$createElement;
        this.$notify({
          title: "退出",
          message: h("i", { style: "color: teal" }, "已成功退出系统哦~"),
        });
      }
    },
    showCollapse() {
      this.isCollapse = !this.isCollapse;
      this.setCollapse(this.isCollapse);
    },
  },
};
</script>

<style lang="less" scoped>
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #eee;
  background-color: #fff;
  .header-left {
    display: flex;
    align-items: center;
    .icont-left {
      font-size: 30px;
      float: left;
      line-height: 60px;
      cursor: pointer;
    }
  }
  .header-right {
    float: right;
    .header-right-avatar {
      vertical-align: middle;
      margin-right: 10px;
    }
    .logout-box {
      cursor: pointer;
    }
  }
}
</style>
